<LayoutTableSmall>
    <!-- 其他 -->
    <template slot="other">

    </template>
    <!-- 搜索 -->
    <template slot="search">
        <el-form :inline="true" label-position="left" label-width="80px" :model="mixinTable_tableSearchData"
            @submit.native.prevent class="demo-form-inline">
            <el-form-item>
                <el-input clearable v-model="mixinTable_tableSearchData.orderNo" placeholder="查询订单号"
                    @change="mixinTable_searchData" style="width:260px">
                    <el-button slot="append" icon="el-icon-search" @click="mixinTable_searchData()">
                    </el-button>
                </el-input>
            </el-form-item>
            <el-form-item>
               
            </el-form-item>
        </el-form>
    </template>
    <!-- 功能 -->
    <template slot="function">
        <el-radio-group v-model="mixinTable_tableSearchSenior.orderStatus.value" placeholder="请选择" @change="statusChange">
            <el-radio-button v-for="item in options" :key="item.value" :label="item.value">{{item.label}}
            </el-radio-button>
        </el-radio-group>
    </template>
    <!-- 表格 -->
    <template slot="table">

        <!-- <div class="orderBox" v-loading="mixinTable_loading">
            <div class="list">
                <div class="ul">
                    <el-checkbox-group v-model="mixinTable_selectTableData" @change="handleCheckedChange">
                        <div class="li" v-for="(item,index) in mixinTable_tableData">
                            <div class="base">
                                <div class="left">

                                    <el-checkbox :key="item.id" :label="item.id" class="checkbox"></el-checkbox>
                                   <div>售后单号: {{item.orderNo}}</div> 
                                    
                                    <div class="b">订单编号:{{item.orderNo}}</div>
                                    <div class="b">下单时间:{{item.createdTimeStr}}</div>
                                </div>
                                <div class="right">
                                    {{item.orderFlow.stateDesc}}
                                </div>
                            </div>
                            <div class="goods">
                                <div class="item" v-for="(iitem,iindex) in item.orderItemLst">
                                    <div class="albumUrl">
                                        <imageBox :src="iitem.albumUrl" scrollContainer=".list"></imageBox>
                                    </div>
                                    <div class="text">
                                        <div class="name">{{iitem.productName}}</div>
                                        <div class="des">
                                            <div v-if="iitem.spData">
                                                数量:{{iitem.buyNum}};{{ JSON.parse(iitem.spData).textString }}</div>
                                            <div v-else>数量:{{iitem.buyNum}};无规格</div>
                                        </div>
                                        <div class="num">
                                           <div class="n">单:¥{{iitem.activityPrice}}</div>
                                            <div class="n">小计:￥{{iitem.payAmount}}</div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="other">
                                <div class="o">
                                    {{deliveryWay(item.deliveryType)}}
                                </div>
                                <div class="o">
                                    {{payManner(item)}}
                                </div>
                                <div class="o">{{item.nickName}}</div>

                                <div class="o" v-if="item.orderType === 2">
                                    充值到余额,充值金额:{{item.payAmount}}
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="ll">
                                    <el-button v-for="(iitem, iindex) in item.eventList" :key="iitem.id"
                                        :type="toEventData(iitem).classStyle=='m'?'primary':''"
                                        @click="orderEventClick(item, iitem)">
                                        {{ iitem.eventNote }}
                                    </el-button>
                                </div>
                                <div class="rr">

                                    <el-button @click="OrderDetailsCilck(item)">
                                        订单详情
                                    </el-button>
                                </div>

                            </div>
                        </div>
                    </el-checkbox-group>
                </div>
            </div>
        </div> -->

        <el-table v-loading="mixinTable_loading" :data="mixinTable_tableData" style="width: 100%;" border
        class="tableStyle" :ref="mixinPage_vueName+'TableSmall'" default-expand-all height="100%" row-key="id"
        @selection-change="mixinTable_handleSelectionChangeTableSmall">
       
        <el-table-column type="index" width="50" :index="mixinTable_indexMethod" align="center" label="#">
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号"></el-table-column>
        <el-table-column prop="name" label="订单状态" align="center">
            <template slot-scope="scope">{{scope.row.orderFlow.stateDesc}}</template>
        </el-table-column>
        <el-table-column prop="name" label="购买人" width="70" align="center">
            <template slot-scope="scope">
                <el-popover placement="right" width="300" trigger="click">
                    <div class="userBox">
                        <div class="icon">
                            <imageBox :src="scope.row.icon"></imageBox>
                        </div>
                        <div class="text">
                            <div class="name">{{scope.row.nickName}}</div>
                            <div class="id">ID:{{scope.row.memberCode}}</div>
                        </div>
                    </div>
                    <div slot="reference" class="userShow">
                        <div class="icon">
                            <imageBox :src="scope.row.icon"></imageBox>
                        </div>
                        <div class="el-icon-more more"></div>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
      
        <el-table-column prop="name" label="配送方式" align="center">
            <template slot-scope="scope">{{deliveryWay(scope.row.deliveryType)}}</template>
        </el-table-column>
        <el-table-column prop="name" label="支付方式" align="center">
            <template slot-scope="scope">{{payManner(scope.row)}}</template>
        </el-table-column>
        <el-table-column prop="createdTimeStr" label="下单时间"></el-table-column>
     
        <el-table-column prop="name" label="购买商品" width="130" align="right">
            <template slot-scope="scope">
                <el-popover placement="right" width="400" trigger="click">
                    <div class="goodsBox">
                        <div class="item" v-for="(iitem,iindex) in scope.row.orderItemLst">
                            <div class="albumUrl">
                                <imageBox :src="iitem.albumUrl" scrollContainer=".list"></imageBox>
                            </div>
                            <div class="text">
                                <div class="name">{{iitem.productName}}</div>
                                <div class="des">
                                    <div v-if="iitem.spData">
                                        数量:{{iitem.buyNum}};{{ JSON.parse(iitem.spData).textString }}</div>
                                    <div v-else>数量:{{iitem.buyNum}};无规格</div>
                                </div>
                                <div class="num">
                                    <!-- <div class="n">单:¥{{iitem.activityPrice}}</div> -->
                                    <div class="n">小计:￥{{iitem.payAmount}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div slot="reference" class="goodsShow">
                        <div class="item" v-for="(iitem,iindex) in scope.row.orderItemLst" v-if="iindex<3">
                            <div class="albumUrl">
                                <imageBox :src="iitem.albumUrl" scrollContainer=".list"></imageBox>
                            </div>
                        </div>
                        <div class="el-icon-more more"></div>
                    </div>
                </el-popover>

            </template>
        </el-table-column>
           
        <el-table-column prop="name" label="支付金额" align="right">
            <template slot-scope="scope">
                <div class="payAmount">{{$vFN.Tools.toMoneyCount(scope.row.payAmount)}}</div>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" align="center" width="140">
            <template slot-scope="scope">
                <el-tooltip ceffect="dark" content="订单详情" placement="top">
                    <el-button @click="OrderDetailsCilck(scope.row)" icon="el-icon-tickets" circle>
                    </el-button>
                  </el-tooltip>
              <el-dropdown style="margin-left:5px" @command="orderEventClick" v-if="!$vFN.Utils.isEmpty(scope.row.eventList) && scope.row.eventList.length">
                    <el-button icon="el-icon-more" circle></el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="[scope.row, iitem,'base']"
                            v-for="(iitem, iindex) in scope.row.eventList" :key="iitem.id">{{ iitem.eventNote }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>

        </el-table>

    </template>
    <!-- 表格选项 -->
    <template slot="options">
        
    </template>
    <!-- 分页 -->
    <template slot="page">
        <el-pagination class="paginationStyle" v-if="mixinTable_pageData.total>0" background
            @current-change="mixinTable_pagingData($event)" :current-page="mixinTable_pageData.pageNum"
            :page-size.sync="$vFN.Constants.pageSize" layout="total, prev, pager, next,jumper"
            :total.sync="mixinTable_pageData.total">
        </el-pagination>
    </template>
</LayoutTableSmall>